<template>
  <div class="dynamicColumnTab">
    <!--    -->
    <div style="width: 270px; background-color: #3dbf8f">
      <commonConfigForm
        style=""
        class="commonConfigFormCommonTab"
        ref="commonConfigForm1"
        :option="currentDynamicTab.tabConfig.paramRendert"
        :default-data="currentDynamicTab.tabConfig.rendert"
      >
      </commonConfigForm>
    </div>
    <div>
      <el-tabs :tab-position="tabAttr.tabPosition" v-model="dynamicTabsValue" type="card"
               @tab-click="tabClick" :before-leave="beforeLeave" @tab-remove="removeTab">
        <el-tab-pane class="dynamicTabPane" :lazy="enableLazy" :closable="enabledClose"
                     v-for="(item, index) in dynamicTabs"
                     :key="item.name"
                     :label="item.title"
                     :name="item.name"
        >
              <span v-if="item.icon != ''" class="custom-tree-node" slot="label">
                  <svg class="iconfont" aria-hidden="true">
                      <use :xlink:href=getIconFont(item)></use>
                  </svg>
                <span>{{ item.title }}</span>
              </span>

          <div v-else class="tabLabel" slot="label" style="color: red"> {{ item.title }}</div>
          <!-- <div v-if="item.tabConfig && item.tabConfig.showMode == 'comps' && item.name == nowPage">
              <layoutContainer  :layout="item.tabConfig.paramRender"></layoutContainer>
          </div> -->
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--    <div style="background: red">123</div>-->


  </div>
</template>
<script>
import baseComp from "./baseComp";
import layoutContainer from "./layoutContainer";

export default {
  name: "commonColumnTab",
  extends: baseComp,
  components: {
    layoutContainer,
  },
  props: ["enabledClose", "enabledHide", "enableLazy", "tabAttr", "tabLayout"],
  watch: {
    tabAttr: {
      handler(newVal) {
        this.tabStyles.height = newVal.tabPaneHide;
        this.tabStyles.width = newVal.tabPaneWide;
        //根据配置属性动态设置样式
        switch (newVal.tabPosition) {
          case "top":
            let dynamicTab = document.getElementsByName("dynamicTab el-tab-pane");
            console.log(dynamicTab);
            break;
          case "right":

            break;
          case "bottom":
            break;
          case "left":
            break;
          default:
            break;
        }
      },
      immediate: true, //刷新加载 立马触发一次handler
      deep: true, // 可以深度检测到 obj 对象的属性值的变化
    },
  },
  data() {
    return {
      currentDynamicTab: {
        tabConfig: {
          paramRendert: {},
          rendert: {}
        }
      },
      dynamicTabsValue: null,
      dynamicTabs: [],
      tabIndex: 2,
      tabStyles: {
        height: "100%",
        width: "100%"
      },
      cacheTab: {},
      nowPage: "",
    }
  },
  created() {

  },
  mounted() {
    // let tabNode = {
    //             title: 'Floorplan',
    //             name: '测试工程.Floorplan',
    //             icon: "el-icon-celvezhihangpeizhi",
    //             tabType: 'D',
    //         }
    //  this.addTab(tabNode);
    // this.tabStyles.height = this.tabAttr.tabHide;
    // this.tabStyles.width = this.tabAttr.tabWide;
    //  let attrNode = {
    //             title: '属性',
    //             name: '测试工程.属性',
    //             icon: "",
    //             tabType: 'attr',
    //         }
    //  this.receiveData(attrNode);
    //  let attrNode2 = {
    //             title: '属性2',
    //             name: '测试工程.属性2',
    //             icon: "",
    //             tabType: 'attr',
    //         }
    //  this.receiveData(attrNode2);
  },
  methods: {
    getIconFont(data) {
      let icon = "#" + data.icon;
      return icon;
    },
    receiveData(tabNode) {
      let that = this;
      console.log(JSON.stringify(tabNode));
      //首先检查当前tab是否存在
      let flag = false;
      for (let i = 0; i < that.dynamicTabs.length; i++) {
        let ss = that.dynamicTabs[i];
        if (ss && ss.name == tabNode.name) {
          flag = true;
          if (tabNode.activity) {
            that.dynamicTabsValue = tabNode.name;
            that.nowPage = tabNode.name;
          }
          break;
        }
      }
      if (flag) {
        console.log("当前表格已经存在了");
        return;
      }

      that.addTab(tabNode, that)

    },
    /**
     * 动态tab新增接口
     * {
     *      title: 'Floorplan',
                name: '测试工程.Floorplan',
                icon: "el-icon-celvezhihangpeizhi",
                content: 'Tab 1 content',
                activity: true
     * }
     * @param {*} tabNode 传入参数
     */
    async addTab(tabNode, that) {
      //layoutName
      if (that.tabLayout && that.tabLayout.length > 0) {
        for (let i = 0; i < that.tabLayout.length; i++) {
          let tabNodeTemp = JSON.parse(JSON.stringify(that.tabLayout[i]));
          if (tabNodeTemp.tabType == tabNode.tabType) {
            //判断是否为配置界面，是则获取配置界面数据
            if (tabNodeTemp.showMode == "designScheme") {
              let paramRender = {};
              await that.$myAxios.request('post', '/uavMesh/operation/getOperationUiContentByProcessKey', {processKey: tabNodeTemp.showUrl})
                .then((res) => {
                  if (res.data.code == 200) {
                    let data = res.data.data;
                    if (data.design) {
                      paramRender = data.design.uiContent;
                    }

                  } else {
                    this.$message.error('获取设计方案界面失败！')
                  }
                });
              paramRender.pageName = tabNode.name;
              tabNodeTemp['paramRendert'] = paramRender;
            }
            that.nowPage = tabNode.name;
            if (typeof tabNode.viewData == "object") {
              tabNodeTemp.rendert = tabNode.viewData;
            } else {
              tabNodeTemp.rendert = {}
            }
            tabNode["tabConfig"] = tabNodeTemp;
            if (tabNode.activity) {
              that.dynamicTabsValue = tabNode.name;
              that.$nextTick(() => {
                that.initNav(tabNode, that);
              })
            }
            that.dynamicTabs.push(tabNode);
            break;
          }
        }
        // console.log("传入tabType类型有误，请配置支持的tab类型。");
      } else {
        console.log("当前未配置展示方式。。。。");
      }
      // console.log(that.dynamicTabs);

    },
    /**
     * 初始化tab内容
     * @param {} tabNode
     * @param {*} that
     */
    initNav(tabNode, that) {
      this.executeEvent('initNav', that.path, tabNode, that)
    },
    beforeLeave(activeName, oldActiveName) {
      if (this.enabledHide) {
        // console.log("33333");
        this.cacheTab[oldActiveName] = null;
      }
    },
    tabClick(tabNode) {
      console.log(this.dynamicTabs);
      this.nowPage = tabNode.name;
      for (let i = 0; i < this.dynamicTabs.length; i++) {
        if (this.dynamicTabs[i].name == tabNode.name) {
          this.currentDynamicTab = this.dynamicTabs[i];
          break;
        }
      }
      this.updateAvueFormStyle()
      if (this.enabledHide) {
        if (!this.cacheTab[tabNode.name]) {
          this.cacheTab[tabNode.name] = 1;
        } else {
          this.cacheTab[tabNode.name] = null;
          this.dynamicTabsValue = "-1";
        }
      }
    },


    updateAvueFormStyle(){
      var element = document.querySelector(".dynamicColumnTab .commonConfigFormCommonTab .avue-form");
      element.width = "0px";
      element.height = "0px";
    },
    removeTab(targetName) {
      let tabs = this.dynamicTabs;
      let activeName = this.dynamicTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.dynamicTabsValue = activeName;
      this.nowPage = activeName;
      this.dynamicTabs = tabs.filter(tab => tab.name !== targetName);
    }
  },

  computed: {
    tabStyle() {
      return this.tabStyles;
    },
  }
}
</script>

<style lang="less" scoped>
.dynamicColumnTab {
  display: flex;
  width: 100%;
  height: 100%;
  //position: relative;

  .dynamicTabPane {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .dynamicTabPane > div {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /deep/ .el-tabs__content {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-closable:hover {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /deep/ .el-tabs__header {
    margin: 0;
  }

  /deep/ .is-top {
    height: 28px;
    background-color: #f5f5f5;
    line-height: 28px;
    font-family: 'Noto Sans CJK SC', 'Source Han Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif';

    .is-active {
      background-color: #ffffff;
      color: black;
    }

    .el-tabs__item {
      color: black;
      padding: 0 12px;

      .el-icon-close {
        overflow: visible;
        width: 14px;
        right: 0px;
        margin-left: 0px;
      }


    }

    .el-tabs__item:nth-child(2) {
      padding-left: 12px;
    }

    .el-tabs__item:last-child {
      padding-left: 12px;
      padding-right: 12px;
    }

  }

  /deep/ .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child {
    padding: 17px 0;
  }

  /deep/ .is-right {
    width: 28px;
    // height: 100%;
    background-color: #f5f5f5;

    .el-tabs__item {
      writing-mode: tb;
      width: 28px;
      padding: 17px 0;
      text-align: center;
      position: relative;
      height: auto;
      line-height: 32px;
      color: black;
      letter-spacing: 6px;
    }

    .is-active {
      background-color: #ffffff;
      color: black;
    }
  }

}

.iconfont {
  width: 1em;
  height: 1em;
  /*跟随父元素字体大小*/
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


/deep/ .commonConfigFormCommonTab .layoutContainer .resizableRow .resizableRowContent {
  width: 100%;
  height: 100%;
  overflow: visible !important;
}

/deep/ .dynamicColumnTab .commonConfigFormCommonTab .avue-form {
  .commonConfigForm .commonConfigFormCommonTab{
    .avue-form {
      width: 0px !important;
      height: 0px !important;
    }
  }
}
</style>
